<template>
    <!--监测信息-->
    <div class="earlywarning_monitoring_information">
        <div class="title_category">实时监测</div>
        <div class="monitor_list">
            <div>
                <span>液位：</span>
                <span>2444.465</span>
                <span></span>
            </div>
            <div>
                <span>可燃气：</span>
                <span>2444.465</span>
                <span></span>
            </div>
            <div>
                <div>
                    <span>温度：</span>
                    <span>36.156℃</span>
                    <span></span>
                </div>
                <div>
                    <span></span>
                    <span>高报</span>
                </div>
            </div>
        </div>
        <div class="title_category basic">基本信息</div>
        <div class="basic_infor">
            <div v-for="(item, index) in state.basicList" :key="index">
                <span>{{ item.name }}</span>
                <span>{{ item.value }}</span>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
const state = reactive({
    basicList: [
        {
            name: '监测点名：',
            value: '液化氢罐组二'
        },
        {
            name: '所属企业：',
            value: '山东三丰新材料有限公司'
        },
        {
            name: '对象高度：',
            value: '9米'
        },
        {
            name: '介质：',
            value: '甲基叔丁基醚'
        },
        {
            name: '半径：',
            value: '4.775米'
        },
        {
            name: '形状：',
            value: '圆柱体'
        },
        {
            name: '所属单元：',
            value: '罐内单元'
        },
        {
            name: '详细地址：',
            value: '山东省临沂市吕南县团林镇坪南路'
        }
    ]
});
</script>

<style scoped lang="scss">
.earlywarning_monitoring_information {
    padding-bottom: 20px;
    .title_category {
        margin-top: 22px;
        font-size: 18px;
        font-weight: 500;
        color: #1b93fb;
        background: url(@/assets/image/titlecategoryback.png) no-repeat;
        background-size: 100% 100%;
        padding-left: 40px;
        height: 48px;
        line-height: 45px;
        width: 166px;
    }
    .basic {
        margin-top: 55px;
    }
    .monitor_list {
        display: flex;
        justify-content: flex-start;
        margin-top: 10px;
        padding-left: 9px;
        > div {
            width: 30%;
            font-size: 14px;
            color: #b6b5b5;
            display: flex;
            align-items: center;
            &:nth-of-type(3) {
                display: flex;
                align-items: center;
                color: #ff3238;
                > div {
                    &:nth-of-type(1) {
                        display: flex;
                        align-items: center;
                        span {
                            &:nth-of-type(3) {
                                display: inline-block;
                                width: 14px;
                                height: 14px;
                                background: url(@/assets/image/questionicon.png) no-repeat;
                                background-size: 100% 100%;
                                margin-left: 6px;
                                cursor: pointer;
                            }
                        }
                    }
                    &:nth-of-type(2) {
                        margin-left: 16px;
                        span {
                            &:nth-of-type(1) {
                                display: inline-block;
                                width: 8px;
                                height: 8px;
                                background: #ff3238;
                                border-radius: 50%;
                                margin-right: 8px;
                            }
                        }
                    }
                }
            }
            > span {
                &:nth-of-type(2) {
                    color: #ffffff;
                }
                &:nth-of-type(3) {
                    display: inline-block;
                    width: 13px;
                    height: 13px;
                    background: url(@/assets/image/questionicon.png) no-repeat;
                    background-size: 100% 100%;
                    margin-left: 6px;
                    cursor: pointer;
                }
            }
        }
    }
    .basic_infor {
        margin-top: 15px;
        display: flex;
        flex-grow: 1;
        flex-wrap: wrap;
        padding-left: 9px;
        > div {
            width: 100%;
            margin-bottom: 10px;
            span {
                color: #ffffff;
                font-size: 14px;
                &:nth-of-type(1) {
                    color: #b6b5b5;
                }
            }
        }
    }
}
</style>
